<template>
  <div class="app-container" v-wechat-title="'用户管理'">
    <el-card class="box-card">
      <el-form ref="queryForm" :inline="true" :model="queryParams" label-width="68px" size="small">
        <el-form-item>
          <el-button
              icon="el-icon-plus"
              type="primary"
              @click="handleAddOrUpdate()"
              :disabled="isAuth('sys:user:add')"
          >新增
          </el-button>

          <el-button
              icon="el-icon-delete"
              type="danger"
              style="margin-left:15px"
              @click="handleDelete()"
              :disabled="multiple || isAuth('sys:user:delete') || isDisabled"
          >删除
          </el-button>
        </el-form-item>

        <el-form-item prop="nickname">
          <el-input
              v-model="queryParams.nickname"
              clearable
              placeholder="用户昵称"
              size="small"
              style="width: 240px"
              @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item prop="mobile" style="margin-left: 10px">
          <el-select v-model="roleIds" multiple :clearable="true" placeholder="角色">
            <el-option
                v-for="item in roleInfo"
                :key="item.roleId"
                :label="item.name"
                :value="item.roleId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="status" style="margin-left: 10px">
          <el-select
              v-model="queryParams.status"
              clearable
              size="small"
              style="width: 150px"
              placeholder="全部"
          >
            <el-option label="正常" value="0"/>
            <el-option label="禁用" value="1"/>
            <el-option label="未激活" value="2"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 表格-->
      <el-table
          border
          :data="userInfo"
          @selection-change="selectionChangeHandle">
        <el-table-column
            type="selection"
            header-align="center"
            align="center"
            width="50">
        </el-table-column>
        <el-table-column
            label="id"
            prop="id">
        </el-table-column>
        <el-table-column
            label="用户名"
            prop="username">
        </el-table-column>
        <el-table-column
            label="昵称"
            prop="nickname">
        </el-table-column>
        <el-table-column
            label="状态">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.status == 1 ">已激活</el-tag>
            <el-tag type="warning" v-else>未激活</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="禁用">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.isDisabled"
                       :active-value="1"
                       :inactive-value="0"
                       active-color="#e6a23c"
                       inactive-color="#909399"
                       @change="handleDisableStatus($event,scope.row.id)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
            label="头像">
          <template slot-scope="scope">
            <el-avatar :size="70" fit="fill" :src="scope.row.avatar"/>
          </template>
        </el-table-column>
        <el-table-column
            label="角色名称"
            prop="roleNames">
        </el-table-column>
        <el-table-column
            label="创建方式"
            prop="createMethod">
        </el-table-column>
        <el-table-column
            label="创建时间"
            prop="createTime">
        </el-table-column>

        <el-table-column
            fixed="right"
            label="操作"
            width="155">
          <template slot-scope="scope">
            <el-button
                plain
                size="mini"
                type="warning"
                :disabled="isAuth('sys:user:update')"
                @click="handleAddOrUpdate(scope.row.id)"> 修改
            </el-button>
            <el-button
                plain
                size="mini"
                type="danger"
                :disabled="isAuth('sys:user:delete') || scope.row.id === $store.getters.id"
                @click="handleDelete(scope.row.id)"> 删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
          v-show="pagination.total>0"
          :limit.sync="pagination.pageSize"
          :page.sync="pagination.currentPage"
          :total="pagination.total"
          :page-sizes="[2, 10, 20, 50]"
          @pagination="handleQuery"
      />
    </el-card>

    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="accountAddOrUpdate" @refreshDataList="handleQuery"></add-or-update>

  </div>
</template>

<script>
import AddOrUpdate from './account-add-or-update'
import {getUserList, disabledStatus, completeDelete} from '@/api/system/user'
import {getRoleList} from "@/api/system/role";
import {isAuth} from "@/utils/util";

export default {
  name: "userList",
  components: {AddOrUpdate},
  computed:{
    isDisabled() {
      return this.ids.indexOf(this.$store.getters.id) != -1
    }
  },
  data() {
    return {
      // 非多个禁用
      multiple: true,
      // 选中数组
      ids: [],
      //角色ids
      roleIds: undefined,
      userInfo: [],
      roleInfo: [],
      addOrUpdateVisible: false,
      queryParams: {
        nickname: undefined,
        role: undefined,
        status: undefined,
        currentPage: 1,
        pageSize: 10
      },
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
    }
  },
  methods: {
    // 新增 / 修改
    handleAddOrUpdate(id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.accountAddOrUpdate.init(id)
      })
    },
    //删除用户
    handleDelete(id) {
      let userIds = id ? id : this.ids
      this.$confirm(`确定对[id=${userIds}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        completeDelete(userIds).then(res => {
          if (res.status) {
            this.handleQuery();
            this.$message.success('删除成功!')
          } else {
            this.$message.error('删除失败。。请检查')
          }
        })
      }).catch(() => {
      })
    },
    //获取用户列表
    handleQuery() {
      this.queryParams.currentPage = this.pagination.currentPage
      this.queryParams.pageSize = this.pagination.pageSize
      this.queryParams.role = this.roleIds ? this.roleIds.join() : undefined
      getUserList(this.queryParams).then(res => {
        this.pagination.total = res.total
        this.userInfo = res.data;
      })
    },
    //修改禁用状态
    handleDisableStatus(status, id) {
      disabledStatus(status, id).then(res => {
        if (res.status) {
          if (status == 1) {
            this.$message.success('禁用成功');
          } else {
            this.$message.success('该用户已恢复正常');
          }
          this.handleQuery();
        } else {
          this.$message.error('禁用失败。。。')
        }
      })
    },
    // 多选
    selectionChangeHandle(selection) {
      this.ids = selection.map(item => item.id)
      this.multiple = !selection.length
    },
    //重置
    handleReset() {
      this.pagination = {
        currentPage: 1,
        pageSize: 10,
        total: 0
      }
      this.queryParams = {
        username: undefined,
        role: undefined,
        status: undefined
      }
      this.roleIds = undefined
      this.handleQuery()
    },
    listRole() {
      getRoleList().then(res => {
          this.roleInfo = res.data
      })
    }
  },
  created() {
    this.handleQuery()
    this.listRole()
  }
}
</script>

<style scoped>
.table {
  margin-top: 10px;
}

.searchRow {
  margin-top: 20px;
}
</style>
